<html>
    <head>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--条件渲染-->
            <p v-if="seen">现在你看到我了</p>

            <!--循环渲染-->
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>
        <script>
            var app =new Vue({
                el:"#app",
                data:{
                    seen:true,
                    todos:[
                        {text:'学习JavaScript'},
                        {text:'学习Vue'},
                        {text:'整个牛项目'}
                    ]
                }
            });
            /*
                这个例子演示了，我们不仅可以把数据绑定到DOM文本或者元素的attribute上，还可以绑定到DOM结构。
                此外，Vue也提供了一个强大的过渡效果系统，可以在Vue 插入、更新、移除元素时"自动应用过渡效果"
            */
        </script>
    </body>
</html>